<template>
  <component
    :is="configProvider"
    class="demo"
    namespace="naive-ui-doc"
    preflight-style-disabled
    :hljs="hljs"
  >
    <n-message-provider>
      <div>
        <div class="header">
          <button>API接口</button>
          <button>SDK接口</button>
          <button>组件库</button>
        </div>
        <div class="body">
          <div class="menus">
            <div class="item" v-for="item in state.menus" :key="item.text">
              <button @click="onMenuClick(item)">{{ item.text }}</button>
            </div>
          </div>

          <div class="content">
            <vue-markdown
              :source="src"
              :options="{
                html: true,
                linkify: true,
                typographer: true,
              }"
            />
          </div>
        </div>

        <!--        <router-view />-->
      </div>
    </n-message-provider>
  </component>
</template>
<script setup lang="ts">
import hljs from "./utils/hljs";
import "highlight.js/styles/atom-one-dark.css";
import { NConfigProvider } from "naive-ui";
import { reactive, ref } from "vue";
import VueMarkdown from "vue-markdown-render";

const configProvider = NConfigProvider;

interface MenuProps {
  text: string;
  markdown: string;
}

interface StateProps {
  menus: Array<MenuProps>;
}

const state = reactive<StateProps>({
  menus: [
    { text: "右例警告列表组件", markdown: "this is value" },
    { text: "地图搜素组件", markdown: "this is value" },
    { text: "摄像机列表组件", markdown: "this is value" },
  ],
});

const src = ref<string>(`
# 地图组件

地图组件描述

## 代码演示

\`\`\`demo
basic.vue
\`\`\`

## API

### 属性

| 参数  | 类型     | 默认值  | 说明             | 版本  |
| ----- | -------- | ------- | ---------------- | ----- |
| mapId | \`string\` | \`mapId\` | 初始化地图的 dom | 1.0.0 |

### 事件

- 组件内抛出函数

| 事件名称                            | 说明                     | 回调参数         |
| ----------------------------------- | ------------------------ | ---------------- |
| common-comp-map\\_\\_init-map-resolve | 地图初始化成功后返回状态 | {status:Boolean} |

<!-- ### 方法
- 组件提供的能力函数

`);

const onMenuClick = (data: MenuProps) => {
  console.log(data);
};
</script>

<style lang="less">
.header {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eee;
  height: 10vh;
}

.body {
  display: flex;
  height: 90vh;

  .menus {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #ddd;
    width: 200px;
  }

  .content {
    flex: 1;
    height: 100%;
  }
}
</style>
